<template>

<h2>日志列表</h2>

<el-form :inline="true" :model="logForm"
  >
    <el-form-item label="日志编号">  <el-input v-model="logForm.id" />
    </el-form-item>
    <el-form-item label="用户编号">   <el-input v-model="logForm.uid" />
    </el-form-item>

    <el-form-item label="用户名称">
      <el-input v-model="logForm.uname" />
    </el-form-item>

    <el-form-item label="时间">
      <el-date-picker
        v-model="logForm.startTime"
        type="datetime"
        placeholder="Pick a date"
        :default-value="new Date(2025, 7, 6)"
      />
      </el-form-item>
      <el-form-item label="-">
      <el-date-picker
        v-model="logForm.endTime"
        type="datetime"
        placeholder="Pick a date"
        :default-value="new Date(2025, 7, 6)"
      />
      </el-form-item>
    

    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="logList" stripe style="width: 100%">
    <el-table-column prop="id" label="日志编号"  />
    <el-table-column prop="uid" label="用户编号"/>
    <el-table-column prop="uname" label="用户姓名" />
    <el-table-column prop="url" label="日志地址"/>
    <el-table-column prop="data" label="传入参数" width="180"/>
    <el-table-column prop="createTimeStr" label="日志创建时间"width="250"/>
 
  </el-table>
  <hr/>
  <el-pagination
    small
    background
    :page-size="3"
    :pager-count="10"
     layout="prev, pager, next"
    :total="total"
    class="mt-4"
    @current-change="handlerLogPageChange"
/>


</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { request } from '../utils/request';
import { ElMessageBox, ElMessage } from "element-plus";

const logList = ref([]);
const total = ref(0);
//查询条件，用于存储查询条件
const logForm=reactive({
    id:'',
    uid:'',
    uname:'',
    url:'',
    data:'',
    startTime: undefined,
    endTime:undefined,
    daterange:''

});

function query(){
   loadLogList(1);
}

//加载日志列表
function loadLogList(pageNum){
  
    logForm.pageNum=pageNum;
    request({url:'http://localhost:8081/listLogs',method:'post',data:logForm})
        .then((response) =>{
          console.log(JSON.stringify(response));
             logList.value=response.data.logList;
             total.value=response.data.total;
        }).catch((error)=>{
            console.log(error);
        })
}
//加载日志列表第一页
onMounted(function(){

    loadLogList(1);
});




//提交查询条件
function subQueryLog(){
    logForm.pageNum=1;//将页码重置为1
   
    request({
        url:'http://localhost:8081/listLogs',
        method:'get',data:logForm })
        .then((response)=>{
             logList.value=response.data.logList;
             total.value=response.data.total;
    })
        .catch((error)=>{
            console.log(error);
        })
}
//分页参数处理
function handlerLogPageChange(pageNum){
    loadLogList(pageNum);
}




</script>

<style scoped>
</style>